<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>人才信息 - 招聘APP</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
            background-color: #f9f9f9;
            height: 100vh;
        }
        .app-container {
            max-width: 390px;
            height: 100%;
            margin: 0 auto;
            background-color: white;
            overflow-y: auto;
        }
        .progress-bar {
            height: 4px;
            background-color: #e0e0e0;
            border-radius: 2px;
            overflow: hidden;
        }
        .progress-fill {
            height: 100%;
            background-color: #1677ff;
            transition: width 0.3s;
        }
        .form-section {
            padding: 20px 0;
            border-bottom: 1px solid #f0f0f0;
        }
        .form-section:last-child {
            border-bottom: none;
        }
        .form-group {
            margin-bottom: 15px;
        }
        .form-group label {
            display: block;
            font-size: 14px;
            color: #666;
            margin-bottom: 5px;
        }
        .form-control {
            width: 100%;
            padding: 12px;
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            font-size: 16px;
            transition: all 0.3s;
        }
        .form-control:focus {
            border-color: #1677ff;
            box-shadow: 0 0 0 2px rgba(22, 119, 255, 0.1);
            outline: none;
        }
        .btn-primary {
            background-color: #1677ff;
            color: white;
            border: none;
            border-radius: 8px;
            padding: 15px;
            width: 100%;
            font-size: 16px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s;
        }
        .btn-primary:hover {
            background-color: #0e5ecc;
        }
        .btn-outline {
            background-color: white;
            color: #1677ff;
            border: 1px solid #1677ff;
            border-radius: 8px;
            padding: 15px;
            width: 100%;
            font-size: 16px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s;
        }
        .btn-outline:hover {
            background-color: #f0f7ff;
        }
        .tag {
            display: inline-block;
            padding: 8px 15px;
            border-radius: 20px;
            background-color: #f5f5f5;
            color: #666;
            margin-right: 10px;
            margin-bottom: 10px;
            cursor: pointer;
            transition: all 0.3s;
        }
        .tag.selected {
            background-color: #e6f4ff;
            color: #1677ff;
            border: 1px solid #91caff;
        }
        .avatar-upload {
            position: relative;
            width: 100px;
            height: 100px;
            margin: 0 auto;
        }
        .avatar-upload img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 50%;
        }
        .avatar-upload .upload-icon {
            position: absolute;
            bottom: 0;
            right: 0;
            width: 30px;
            height: 30px;
            background-color: #1677ff;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            cursor: pointer;
        }
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 390px;
            display: flex;
            justify-content: space-around;
            padding: 15px 0;
            background-color: white;
            border-top: 1px solid #eee;
        }
        .bottom-nav a {
            display: flex;
            flex-direction: column;
            align-items: center;
            color: #666;
            text-decoration: none;
            font-size: 12px;
        }
        .bottom-nav a i {
            font-size: 20px;
            margin-bottom: 5px;
        }
        .bottom-nav a.active {
            color: #1677ff;
        }
        .step-nav {
            display: flex;
            justify-content: space-between;
            margin-bottom: 20px;
        }
        .step-nav button {
            background: none;
            border: none;
            color: #1677ff;
            font-size: 14px;
            cursor: pointer;
        }
        .step-nav button:disabled {
            color: #ccc;
            cursor: not-allowed;
        }
    </style>
</head>
<body>
    <div class="app-container relative">
        <div class="px-6 py-4">
            <div class="flex items-center justify-between mb-4">
                <h1 class="text-xl font-bold text-gray-800">完善个人信息</h1>
                <span class="text-sm text-gray-500">1/4</span>
            </div>
            
            <div class="progress-bar mb-6">
                <div class="progress-fill" style="width: 25%;"></div>
            </div>
            
            <!-- 步骤导航 -->
            <div class="step-nav">
                <button id="prev-btn" disabled><i class="fas fa-arrow-left mr-1"></i> 上一步</button>
                <button id="next-btn">下一步 <i class="fas fa-arrow-right ml-1"></i></button>
            </div>
            
            <!-- 步骤1：基本信息 -->
            <div id="step-1" class="step-content">
                <div class="form-section">
                    <div class="avatar-upload mb-6">
                        <img src="https://images.unsplash.com/photo-1633332755192-727a05c4013d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8dXNlciUyMHByb2ZpbGV8ZW58MHx8MHx8&auto=format&fit=crop&w=200&h=200&q=80" alt="头像">
                        <div class="upload-icon">
                            <i class="fas fa-camera"></i>
                        </div>
                    </div>
                </div>
                
                <div class="form-section">
                    <div class="form-group">
                        <label for="name">姓名</label>
                        <input type="text" id="name" class="form-control" placeholder="请输入您的真实姓名">
                    </div>
                    <div class="form-group">
                        <label for="gender">性别</label>
                        <select id="gender" class="form-control">
                            <option value="">请选择</option>
                            <option value="male">男</option>
                            <option value="female">女</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="birth">出生日期</label>
                        <input type="date" id="birth" class="form-control">
                    </div>
                    <div class="form-group">
                        <label for="phone">联系电话</label>
                        <input type="tel" id="phone" class="form-control" placeholder="请输入手机号码" maxlength="11">
                    </div>
                    <div class="form-group">
                        <label for="email">电子邮箱</label>
                        <input type="email" id="email" class="form-control" placeholder="请输入电子邮箱">
                    </div>
                </div>
            </div>
            
            <!-- 步骤2：教育背景 -->
            <div id="step-2" class="step-content hidden">
                <div class="form-section">
                    <div class="flex justify-between items-center mb-4">
                        <h2 class="text-lg font-semibold">教育经历</h2>
                        <button class="text-blue-500"><i class="fas fa-plus"></i> 添加</button>
                    </div>
                    
                    <div class="bg-gray-50 p-4 rounded-lg mb-4">
                        <div class="form-group">
                            <label for="school">学校名称</label>
                            <input type="text" id="school" class="form-control" placeholder="请输入学校名称">
                        </div>
                        <div class="form-group">
                            <label for="major">专业</label>
                            <input type="text" id="major" class="form-control" placeholder="请输入专业名称">
                        </div>
                        <div class="form-group">
                            <label for="degree">学历</label>
                            <select id="degree" class="form-control">
                                <option value="">请选择</option>
                                <option value="bachelor">本科</option>
                                <option value="master">硕士</option>
                                <option value="doctor">博士</option>
                                <option value="other">其他</option>
                            </select>
                        </div>
                        <div class="flex gap-4">
                            <div class="form-group flex-1">
                                <label for="start-date">入学时间</label>
                                <input type="month" id="start-date" class="form-control">
                            </div>
                            <div class="form-group flex-1">
                                <label for="end-date">毕业时间</label>
                                <input type="month" id="end-date" class="form-control">
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="form-section">
                    <div class="flex justify-between items-center mb-4">
                        <h2 class="text-lg font-semibold">工作经历</h2>
                        <button class="text-blue-500"><i class="fas fa-plus"></i> 添加</button>
                    </div>
                    
                    <div class="bg-gray-50 p-4 rounded-lg mb-4">
                        <div class="form-group">
                            <label for="company">公司名称</label>
                            <input type="text" id="company" class="form-control" placeholder="请输入公司名称">
                        </div>
                        <div class="form-group">
                            <label for="position">职位</label>
                            <input type="text" id="position" class="form-control" placeholder="请输入职位名称">
                        </div>
                        <div class="flex gap-4">
                            <div class="form-group flex-1">
                                <label for="work-start">入职时间</label>
                                <input type="month" id="work-start" class="form-control">
                            </div>
                            <div class="form-group flex-1">
                                <label for="work-end">离职时间</label>
                                <input type="month" id="work-end" class="form-control">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="description">工作描述</label>
                            <textarea id="description" class="form-control" rows="3" placeholder="请简要描述您的工作内容和成就"></textarea>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 步骤3：技能标签 -->
            <div id="step-3" class="step-content hidden">
                <div class="form-section">
                    <h2 class="text-lg font-semibold mb-4">选择您的技能标签</h2>
                    <p class="text-gray-500 mb-4">请选择您擅长的技能，最多可选择10个</p>
                    
                    <div class="mb-4">
                        <h3 class="text-base font-medium mb-2">技术方向</h3>
                        <div class="tags-container">
                            <span class="tag">前端开发</span>
                            <span class="tag">后端开发</span>
                            <span class="tag">全栈开发</span>
                            <span class="tag">移动开发</span>
                            <span class="tag">数据分析</span>
                            <span class="tag">人工智能</span>
                            <span class="tag">产品设计</span>
                            <span class="tag">UI/UX</span>
                        </div>
                    </div>
                    
                    <div class="mb-4">
                        <h3 class="text-base font-medium mb-2">编程语言</h3>
                        <div class="tags-container">
                            <span class="tag">JavaScript</span>
                            <span class="tag">TypeScript</span>
                            <span class="tag">Python</span>
                            <span class="tag">Java</span>
                            <span class="tag">C++</span>
                            <span class="tag">Go</span>
                            <span class="tag">PHP</span>
                            <span class="tag">Ruby</span>
                            <span class="tag">Swift</span>
                            <span class="tag">Kotlin</span>
                        </div>
                    </div>
                    
                    <div class="mb-4">
                        <h3 class="text-base font-medium mb-2">框架</h3>
                        <div class="tags-container">
                            <span class="tag">React</span>
                            <span class="tag">Vue</span>
                            <span class="tag">Angular</span>
                            <span class="tag">Node.js</span>
                            <span class="tag">Django</span>
                            <span class="tag">Flask</span>
                            <span class="tag">Spring</span>
                            <span class="tag">Laravel</span>
                            <span class="tag">Express</span>
                            <span class="tag">TensorFlow</span>
                        </div>
                    </div>
                    
                    <div class="mb-4">
                        <h3 class="text-base font-medium mb-2">其他技能</h3>
                        <div class="tags-container">
                            <span class="tag">项目管理</span>
                            <span class="tag">团队协作</span>
                            <span class="tag">沟通能力</span>
                            <span class="tag">问题解决</span>
                            <span class="tag">创新思维</span>
                            <span class="tag">敏捷开发</span>
                            <span class="tag">DevOps</span>
                            <span class="tag">数据库</span>
                        </div>
                    </div>
                </div>
                
                <div class="form-section">
                    <h2 class="text-lg font-semibold mb-4">已选标签</h2>
                    <div id="selected-tags" class="mb-4">
                        <p class="text-gray-400">暂无选择</p>
                    </div>
                </div>
            </div>
            
            <!-- 步骤4：简历上传 -->
            <div id="step-4" class="step-content hidden">
                <div class="form-section">
                    <h2 class="text-lg font-semibold mb-4">上传您的简历</h2>
                    <p class="text-gray-500 mb-6">支持PDF、Word格式，大小不超过10MB</p>
                    
                    <div class="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center mb-6">
                        <i class="fas fa-file-upload text-gray-400 text-4xl mb-3"></i>
                        <p class="text-gray-500 mb-2">点击或拖拽文件到此处上传</p>
                        <p class="text-gray-400 text-sm">最佳尺寸: A4</p>
                        <input type="file" class="hidden" id="resume-upload" accept=".pdf,.doc,.docx">
                        <button class="mt-4 px-4 py-2 bg-gray-100 text-gray-700 rounded-md">选择文件</button>
                    </div>
                    
                    <div class="bg-gray-50 p-4 rounded-lg mb-6 hidden" id="resume-preview">
                        <div class="flex items-center">
                            <i class="fas fa-file-pdf text-red-500 text-2xl mr-3"></i>
                            <div class="flex-1">
                                <p class="font-medium">我的简历.pdf</p>
                                <p class="text-gray-500 text-sm">2.5MB</p>
                            </div>
                            <button class="text-red-500"><i class="fas fa-trash"></i></button>
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <label for="self-intro">自我介绍</label>
                        <textarea id="self-intro" class="form-control" rows="5" placeholder="请简要介绍自己的职业经历、技能特长和求职意向"></textarea>
                    </div>
                </div>
                
                <div class="form-section">
                    <h2 class="text-lg font-semibold mb-4">求职意向</h2>
                    <div class="form-group">
                        <label for="job-type">期望职位</label>
                        <input type="text" id="job-type" class="form-control" placeholder="请输入期望职位">
                    </div>
                    <div class="form-group">
                        <label for="salary">期望薪资</label>
                        <select id="salary" class="form-control">
                            <option value="">请选择</option>
                            <option value="1">5k以下</option>
                            <option value="2">5k-10k</option>
                            <option value="3">10k-15k</option>
                            <option value="4">15k-20k</option>
                            <option value="5">20k-30k</option>
                            <option value="6">30k以上</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="city">期望城市</label>
                        <input type="text" id="city" class="form-control" placeholder="请输入期望工作城市">
                    </div>
                </div>
                
                <div class="mt-8 mb-20">
                    <button class="btn-primary" id="submit-btn">完成</button>
                </div>
            </div>
        </div>

        <!-- 移除底部导航 -->
    </div>

    <script>
        // 步骤切换逻辑
        const steps = document.querySelectorAll('.step-content');
        const prevBtn = document.getElementById('prev-btn');
        const nextBtn = document.getElementById('next-btn');
        const progressFill = document.querySelector('.progress-fill');
        const stepIndicator = document.querySelector('.text-sm.text-gray-500');
        let currentStep = 1;
        
        function showStep(stepNumber) {
            steps.forEach((step, index) => {
                if (index + 1 === stepNumber) {
                    step.classList.remove('hidden');
                } else {
                    step.classList.add('hidden');
                }
            });
            
            // 更新进度条和步骤指示器
            progressFill.style.width = `${stepNumber * 25}%`;
            stepIndicator.textContent = `${stepNumber}/4`;
            
            // 更新按钮状态
            prevBtn.disabled = stepNumber === 1;
            if (stepNumber === 4) {
                nextBtn.textContent = '完成';
            } else {
                nextBtn.innerHTML = '下一步 <i class="fas fa-arrow-right ml-1"></i>';
            }
            
            currentStep = stepNumber;
        }
        
        prevBtn.addEventListener('click', () => {
            if (currentStep > 1) {
                showStep(currentStep - 1);
            }
        });
        
        nextBtn.addEventListener('click', () => {
            if (currentStep < 4) {
                showStep(currentStep + 1);
            } else {
                // 提交表单
                window.location.href = 'card-matching-talent.html';
            }
        });
        
        document.getElementById('submit-btn').addEventListener('click', () => {
            window.location.href = 'card-matching-talent.html';
        });
        
        // 标签选择逻辑
        const tags = document.querySelectorAll('.tag');
        const selectedTagsContainer = document.getElementById('selected-tags');
        const selectedTags = new Set();
        
        tags.forEach(tag => {
            tag.addEventListener('click', () => {
                if (tag.classList.contains('selected')) {
                    tag.classList.remove('selected');
                    selectedTags.delete(tag.textContent);
                } else {
                    if (selectedTags.size < 10) {
                        tag.classList.add('selected');
                        selectedTags.add(tag.textContent);
                    } else {
                        alert('最多只能选择10个标签');
                    }
                }
                
                updateSelectedTags();
            });
        });
        
        function updateSelectedTags() {
            if (selectedTags.size === 0) {
                selectedTagsContainer.innerHTML = '<p class="text-gray-400">暂无选择</p>';
            } else {
                selectedTagsContainer.innerHTML = '';
                selectedTags.forEach(tagText => {
                    const tagElement = document.createElement('span');
                    tagElement.className = 'tag selected';
                    tagElement.textContent = tagText;
                    selectedTagsContainer.appendChild(tagElement);
                });
            }
        }
        
        // 简历上传预览
        const resumeUploadBtn = document.querySelector('.border-2.border-dashed');
        const resumeInput = document.getElementById('resume-upload');
        const resumePreview = document.getElementById('resume-preview');
        
        resumeUploadBtn.addEventListener('click', () => {
            resumeInput.click();
        });
        
        resumeInput.addEventListener('change', () => {
            if (resumeInput.files.length > 0) {
                resumePreview.classList.remove('hidden');
            }
        });
    </script>
</body>
</html>